<template>
	<view class="gm-box" v-if="goods.mdl">
		<view class="pml">
			<!--  规格-->
			<view class="pm-item" >
				<view class="pm-tb">
					<view class="pm-tag">
						规格
					</view>
				</view>
				<view class="pm-t text-limit-1">
					{{ goods.mdl }}
				</view>
			</view>
		</view>
		<!-- <view class="pmr">···</view> -->
	</view>
</template>

<script setup>
const props = defineProps({
    goods: {
        type: Object,
        default: {}
    }
})
</script>

<style lang="scss" scoped>
.gm-box {
	margin-top: 20rpx;
	background: #fff;
	padding: 24rpx 24rpx 0;
	position: relative;
	display: flex;
	.pmr {
		width: 80rpx;
		line-height: 80rpx;
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
		color: #000;
	}

	.pml {
		flex: 1;

		.pm-item {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.pm-tb {
				width: auto;
				min-width: 100rpx;
				display: flex;
				align-items: center;
				margin-right: 10rpx;
			}

			.pm-tag {
				width: auto;
				// height: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				display: inline-block;
				font-size: 20rpx;
				background: $main_color;
				border: 1px solid $main_color;
				color: #fff;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
			}
			.pm-t{
				font-size: 24rpx;
			}
		}

		.pm-cp {
			align-items: flex-start;
		}
	}
}
</style>
